function upload(title, type, content) {
    var xhr = new XMLHttpRequest()
    // 由于音频要放在请求体发送，所以必须使用post方法
    // 这里是ajax发起的请求，所以，后续要怎么处理由js决定
    // 所以这里不使用*.do 这种URL了
    xhr.open(`post`, `/studio/track/record.json?title=${title}&type=${type}`)
    xhr.onload = function () {
        console.log(this.status)
        console.log(this.responseText)
        var data = JSON.parse(this.responseText)
        if (data.result === true){
            alert("上传成功")
            location.reload(true)
        }else {
            alert("请先登录")
            location.assign("../../studio/user/login.html")
        }
    }
    console.log("上传成功")
    xhr.send(content)
}

window.onload = function () {
    document.querySelector(`#authorize`).onclick = function () {
        if (!navigator.mediaDevices.getUserMedia) {
            alert('浏览器版本过低，不支持媒体访问，请更新浏览器')
            return
        }

        var constraints = {
            // video:true,
            audio: true
        }
        var promise = navigator.mediaDevices.getUserMedia(constraints)
        promise.then(onSuccess).catch(onError)
    }
    // stream的类型就是MediaStream（媒体流）
    // 里面有从麦克风采集的声音
    function onSuccess(stream) {
        alert('授权成功')
        // console.log(stream)
        // 视频
        // var oAudio = document.querySelector('video')
        var mediaRecorder = new MediaRecorder(stream)
        // 开始录制时被调用
        mediaRecorder.onstart = function () {
            console.log("开始录制")
        }
        document.querySelector(`#start`).onclick = function () {
            // 放置整个过程的声音数据
            var data = []
            mediaRecorder.start(1_000)
            // 录制过程中被调用
            mediaRecorder.ondataavailable = function (evt) {
                console.log("数据可用")
                console.log(evt)
                // evt.data是一个Blob类型，表示录制下来的声音片段的对象
                data.push(evt.data)
            }
            // 录制结束后被调用
            mediaRecorder.onstop = function () {
                console.log("录制结束")
                console.log(data)
                // 大的二进制数据
                // 将一组数据，组成一个统一的数据
                var type = "audio/webm;codecs=opus"
                var blob = new Blob(data, {type: type})
                // 生成数据播放的url
                var url = URL.createObjectURL(blob)
                console.log(url)

                // 将url赋给audio的src属性用于播放
                var oAudio = document.querySelector('audio')
                oAudio.src = url
                    console.log("停止录制")
                    document.querySelector(`#upload`).onclick = function () {
                        console.log("开始上传")
                        var title = document.querySelector('#title').value.trim()
                        console.log(title)
                        if (title === ""){
                            alert("请输入标题")
                        }else {
                            upload(title, type, blob)
                        }
                    }
            }

        }
        document.querySelector('#stop').onclick = function () {
            mediaRecorder.stop()
        }
        // mediaRecorder.start(1000) //开始录制
        // setTimeout(function () {
        //     mediaRecorder.stop()
        // }, 10 * 1000)
    }

    function onError(error) {
        alert('授权失败' + error)
    }

}